<template>
  <n-grid :cols="7" item-responsive>
    <n-grid-item :span="1">
      <div>
        <n-menu :options="options" style="width: 180px" default-value="1"/>
      </div>
    </n-grid-item>
    <n-grid-item :span="6">
      <div class="space-right">
        <ShowEssay
          v-if="userCollectEssayData[0]"
          v-for="item in userCollectEssayData"
          :key="item.essay_id"
          :essay_data="item"
        ></ShowEssay>
        <n-empty v-else description="暂无收藏文章" style="height: 265px;justify-content: center;">
        </n-empty>
      </div>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang='ts'>
import type { MenuOption } from 'naive-ui'
import { essayListType } from "../../types/index"
import ShowEssay from "../../components/showEssay.vue";

const options: MenuOption[] = [
  {
    label: "文章",
    key: '1'
  }
]

defineProps<{
  userCollectEssayData: essayListType[],
}>()
</script>

<style lang='scss' scoped>
.space-right {
  border-left: 1px solid var(--bs-divider-color);
  padding: 20px;
  box-sizing: border-box;
}
</style>